<section class="tile-list" ng-if="header.pipelineGridView">

  <section class="pipeline-container new-pipeline" ng-if="filteredPipelines.length === 0 && !fetching">
    <div class="centering-container">
      <span translate="home.noPipelines"></span>
    </div>
  </section>

  <section class="pipeline-container single-pipeline"
           ng-repeat="pipeline in filteredPipelines"
           ng-click="openPipeline(pipeline)">
    <header>
      <h2>{{pipeline.title | limitTo: 45}}</h2>
    </header>

    <section class="project-additional-info"
             ng-hide="common.pipelineStatusMap[pipeline.pipelineId].status === 'RUNNING'">
      <span class="time-update" translate="home.updated">Updated</span>
      <span class="time-update" am-time-ago="pipeline.lastModified"></span>
      <span class="time-update" translate="home.ago">ago</span>
    </section>

    <section class="project-additional-info"
             ng-show="common.pipelineStatusMap[pipeline.pipelineId].status === 'RUNNING'">
      <span class="time-update" translate="home.header.uptime">Uptime</span>
      <span class="time-update" am-time-ago="common.pipelineStatusMap[pipeline.pipelineId].timeStamp"></span>
    </section>

    <footer >
      <section class="running-status"
               ng-if="common.pipelineStatusMap[pipeline.pipelineId].status === 'RUNNING'"
               tooltip-placement="bottom"
               tooltip="{{'home.runningStatus' | translate}}">
        <i class="fa fa-spinner fa-spin fa-14x"></i>
      </section>

      <section class="invalid-status"
               ng-if="!pipeline.valid"
               tooltip-placement="bottom"
               tooltip="{{'home.invalidStatus' | translate}}">
        <i class="fa fa-exclamation-triangle fa-12x"></i>
      </section>

      <section class="invalid-status"
               ng-if="common.pipelineStatusMap[pipeline.pipelineId].status == 'START_ERROR' || common.pipelineStatusMap[pipeline.pipelineId].status == 'STARTING_ERROR' || common.pipelineStatusMap[pipeline.pipelineId].status == 'RUNNING_ERROR' || common.pipelineStatusMap[pipeline.pipelineId].status == 'RUN_ERROR' || common.pipelineStatusMap[pipeline.pipelineId].status == 'CONNECT_ERROR' || common.pipelineStatusMap[pipeline.pipelineId].status == 'STOP_ERROR' || common.pipelineStatusMap[pipeline.pipelineId].status == 'STOPPING_ERROR'"
               tooltip-placement="bottom"
               tooltip="{{'Pipeline Status :' + common.pipelineStatusMap[pipeline.pipelineId].status + ': ' + common.pipelineStatusMap[pipeline.pipelineId].message}}">
        <i class="fa fa-exclamation-triangle fa-12x"></i>
      </section>

      <section class="triggered-alert-status"
               ng-if="common.pipelineStatusMap[pipeline.pipelineId].status === 'RUNNING' &&
                   common.alertsMap[pipeline.pipelineId] && common.alertsMap[pipeline.pipelineId].length > 0"
               tooltip-placement="bottom"
               tooltip-html="getPipelineAlerts(common.alertsMap[pipeline.pipelineId])">
        <i class="fa fa-bell fa-12x"></i>
        <span ng-bind="common.alertsMap[pipeline.pipelineId].length"></span>
      </section>

      <section class="pipeline-menu" ng-if="!common.isSlaveNode && isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])">
        <span class="split-bar"></span>
        <div class="action-menu" dropdown>
              <span class="dropdown-toggle" dropdown-toggle
                    ng-click="$event.stopPropagation();">
                <i class="fa fa-ellipsis-h"></i>
              </span>
          <ul class="dropdown-menu" role="menu">
            <li role="presentation"
                ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && !common.isSlaveNode"
                ng-hide="common.pipelineStatusMap[pipeline.pipelineId].status === 'RUNNING'">
              <a href="#" dropdown-toggle ng-click="deletePipelineConfig(pipeline, $event)">
                <i class="fa fa-trash-o"></i>
                <span>{{'global.form.delete' | translate}}</span>
              </a>
            </li>

            <li role="presentation" ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && !common.isSlaveNode">
              <a href="#" dropdown-toggle ng-click="duplicatePipelineConfig(pipeline, $event)">
                <i class="fa fa-files-o"></i>
                <span>{{'global.form.duplicate' | translate}}</span>
              </a>
            </li>

            <li role="presentation" ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && !common.isSlaveNode">
              <a href="#" dropdown-toggle ng-click="sharePipelineConfig(pipeline, $event)">
                <i class="fa fa-share-alt"></i>
                <span>{{'global.form.share' | translate}}</span>
              </a>
            </li>

            <li role="presentation" ng-if="isAuthorized([userRoles.admin, userRoles.creator]) && !common.isSlaveNode">
              <a href="#" dropdown-toggle ng-click="importPipelineConfig(pipeline, $event)">
                <i class="glyphicon glyphicon-import"></i>
                <span>{{'global.form.import' | translate}}</span>
              </a>
            </li>

            <li role="presentation" ng-if="isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])">
              <a href="#" dropdown-toggle ng-click="exportPipelineConfig(pipeline, false, false, $event)">
                <i class="glyphicon glyphicon-export"></i>
                <span>{{'global.form.export' | translate}}</span>
              </a>
            </li>

            <li role="presentation" ng-if="isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])">
              <a href="#" dropdown-toggle ng-click="exportPipelineConfig(pipeline, true, false, $event)">
                <i class="glyphicon glyphicon-export"></i>
                <span>{{'global.form.exportWithLibraryDefinitions' | translate}}</span>
              </a>
            </li>

            <li role="presentation" ng-if="isAuthorized([userRoles.admin, userRoles.creator, userRoles.manager])">
              <a href="#" dropdown-toggle ng-click="exportPipelineConfig(pipeline, true, true, $event)">
                <i class="glyphicon glyphicon-export"></i>
                <span>{{'global.form.exportWithPlainTextCredentials' | translate}}</span>
              </a>
            </li>

            <li ng-repeat-end role="presentation" class="divider"
                ng-if="isAuthorized([userRoles.admin, userRoles.manager])"
                ng-show="pipeline.valid"></li>

            <li role="presentation"
                ng-if="isAuthorized([userRoles.admin, userRoles.manager]) && !common.isSlaveNode"
                ng-hide="common.pipelineStatusMap[pipeline.pipelineId].status === 'RUNNING' || common.pipelineStatusMap[pipeline.pipelineId].status === 'STARTING' || !pipeline.valid">
              <a href="#" dropdown-toggle ng-click="startPipeline(pipeline, $event)">
                <i class="glyphicon glyphicon-play"></i>
                <span>{{'home.header.start' | translate}}</span>
              </a>
            </li>

            <li role="presentation"
                ng-if="isAuthorized([userRoles.admin, userRoles.manager]) && !common.isSlaveNode"
                ng-show="common.pipelineStatusMap[pipeline.pipelineId].status === 'RUNNING'">
              <a href="#" dropdown-toggle ng-click="stopPipeline(pipeline, $event)">
                <i class="glyphicon glyphicon-stop"></i>
                <span>{{'home.header.stop' | translate}}</span>
              </a>
            </li>

          </ul>
        </div>

      </section>

    </footer>
  </section>

  <section class="pipeline-container new-pipeline" ng-if="showLoadMore || fetching">
    <div class="centering-container">
      <a class="btn btn-link"
         ng-if="!fetching"
         ng-click="onShowMoreClick($event);">{{'global.form.showMore' | translate}}</a>

      <div show-loading="fetching"></div>
    </div>
  </section>

</section>
